<!-- directive:title liuyp::Flex布局的高级应用 -->
<!-- directive:breadcrumb 重点Flex的应用 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> flex布局 + 流式布局 </div>
        <div class='panel-body'>
            <p>流式布局: 好处 大大减少了css的兼容问题和代码量</p>
            <p>流式布局: 坏处 必须手动指定空白单位数量</p>
            <div class="row">
                <div class="col-sm-8">
                    <style media="screen" ui-bs>
                        .box {
                            width: 200px; height: 200px;
                            background-color: #000;
                            border-left: 1px solid red; border-top: 1px solid red;
                            display: flex; display: -webkit-flex;
                            flex-flow: row wrap; -webkit-flex-flow: row wrap;
                            align-content: flex-start; -webkit-align-content: flex-start;
                        }
                        .item {
                            height: 50px;
                            background-color: #fff;
                            border-right: 1px solid red; border-bottom: 1px solid red;
                            box-sizing: border-box;
                            flex: 0 0 25%; -webkit-flex: 0 0 25%;
                            display: flex; display: -webkit-flex;
                            align-items: center; -webkit-align-items: center;
                            flex-wrap: wrap; -webkit-flex-wrap: wrap;
                        }
                        .item div{
                            height: 20px; width: 100%; line-height: 20px;
                            background: #f4f4f4;
                            text-align: center;
                        }
                    </style>
                </div>
                <div class="col-sm-4">
                    <div class="box">
                        <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div>
                        <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div>
                        <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div>
                        <div class="item"><div>$</div></div>
                    </div>
                    <hr />
                    <div class="box">
                        <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div>
                        <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div>
                        <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div> <div class="item"><div>$</div></div>
                        <div class="item"><div>$</div></div> <div class="item"><div></div></div> <div class="item"><div></div></div> <div class="item"><div></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> flex布局 居中兼容一行两行 </div>
        <div class='panel-body'>
            <p>一行时候严格照着设计图来搞 两行也能兼容显示</p>
            <p>三行就点点点了</p>
            <div class="row">
                <div class="col-sm-8">
                    <style media="screen" ui-bs>
                        .box1 {
                            width: 200px; height: 100px;
                            background-color: #000;
                            display: flex; display: -webkit-flex;
                            align-items: center;/*交叉轴的中点对齐。*/
                            -webkit-align-items: center; /* Safari 7.0+ */
                        }
                        .item1 {
                            line-height: 20px;
                            background-color: #666;
                            color:#fff;
                            padding:0 20px;
                            text-align:center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    </style>
                </div>
                <div class="col-sm-4">
                    <div class="box1">
                        <div class="item1">阿斯顿发沙发沙发斯蒂芬</div>
                    </div>
                    <hr />
                    <div class="box1">
                        <div class="item1">阿斯顿发沙发沙发斯蒂芬阿斯顿发沙</div>
                    </div>
                    <hr />
                    <div class="box1">
                        <div class="item1">阿斯顿发沙发沙发斯蒂芬阿斯顿发沙发沙发斯蒂芬阿斯顿发沙发沙发斯蒂芬</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
